<template>
    <div class="shop-edit" style=" position: relative">
        <el-drawer
			title="新增进件"
            :before-close="handleClose"
            :visible.sync="show_dialog"
            direction="rtl"
			      size="60%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content">
               
                <el-form  :model="form"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                 
                   class="demo-ruleForm" >
                    <el-form-item label="名称：" prop="pc_name">
                        <el-input v-model="form.pc_name" ></el-input>
                      </el-form-item>
                      <el-form-item label="项目分类：" prop="project_class_id" props.multiple="true">
                        <el-select v-model="form.project_class_id" placeholder="请选择">
                          <el-option
                            v-for="item in group"
                            :key="item.id"
                            :label="item.project_class_name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                     
                       <el-form-item label="项目客户：" prop="customerId">
                        <el-select v-model="form.customerId" placeholder="请选择">
                          <el-option
                            v-for="item in levelList"
                            :key="item.customerId"
                            :label="item.customerName"
                            :value="item.customerId"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                     
                      <el-form-item label="抵扣金额：" prop="pc_deduction_price">
                        <el-input v-model="form.pc_deduction_price"></el-input>
                      </el-form-item>
                      <el-form-item label="结算金额：">
                        <el-input v-model="form.pc_settle_accounts_price" ></el-input>
                      </el-form-item>
                      <el-form-item label="使用条件：" prop="pc_use_condition">
                        <el-input v-model="form.pc_use_condition"></el-input>
                      </el-form-item>

                      <el-form-item label="库存：" prop="pc_stocks">
                        <el-input v-model="form.pc_stocks"></el-input>
                      </el-form-item>
                      <el-form-item label="生效时间：" prop="pc_effectivetime">
                        <el-date-picker
                          v-model="form.pc_effectivetime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择生效日期"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="截止时间：" prop="pc_endtime">
                        <el-date-picker
                          v-model="form.pc_endtime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择截止日期"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="描述：" prop="pc_desc">
                        <tinymce
                            v-if="show_dialog"
                            v-model="form.pc_desc"
                            :height="300"
                            width="95%"
						    	:uploadData="uploadData"
                        />
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="$refs.drawer.closeDrawer()"
                        :loading="loading"
                        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                    >
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    import Tinymce from '@/components/Tinymce';
    import { nc_a } from "@/common/js/area_array.js";
import { resize } from "@/common/js/height.js";
export default {
    data() {
        
        return {
            group: [
					
					
				],levelList: [
					
					
				],
            rules: {
                
                pc_deduction_price: {
          required: true,
          message: "请输入抵扣金额",
          trigger: "blur"
        },
        pc_stocks: {
          required: true,
          message: "请输入库存",
          trigger: "blur"
        },
        pc_effectivetime: {
          required: true,
          message: "请选择生效时间",
          trigger: "blur"
        },
        pc_endtime: {
          required: true,
          message: "请选择截止时间",
          trigger: "blur"
        },
        pc_desc: {
          required: true,
          message: "请输入描述",
          trigger: "blur"
        },
        pc_name: {
          required: true,
          message: "请输入名称",
          trigger: "blur"
        },
        
        customerId: {
          required: true,
          message: "请选择店铺等级",
          trigger: "change"
        },
        pc_use_condition: {
          required: true,
          message: "请输入使用条件",
          trigger: "blur"
        },
       
     
        
        project_class_id: {
          required: true,
          message: "请选所属集团",
          trigger: "change"
        }
      },
            uploadData:{
				img_source:'attach_editor'
			},
            loading: false,
            form: {
                project_class_id: "",
        pc_name: "",
        pc_use_condition: "",
        customerId: "",
        pc_deduction_price: "",
        pc_settle_accounts_price: "",
        pc_stocks: "",
        pc_effectivetime: "",
        pc_endtime: "",
        effective_type:"1",
        deadline_type:"1",
        pc_desc:"",
        project_class_name:""
      },
            formLabelWidth: '80px',
			timer: null,
			show_dialog:false,
			type:'add'
        };
    },
    components: {Tinymce},
	created(){
    this.uploadData={};
        this.getdata();
		console.log('created',this)
	},
    methods: {
        getdata() {
				
				this.$http.post('/admin/platform_coupon/index.php?act=platform_coupon&op=get_class', {
				
				}).then(res => {
					if (res.code == 1) {
                        this.group=res.data.class_list;
                        this.levelList=res.data.customer_list;

					} else {
						
						// alert(res.msg)
					}
				})
			},
       
		show_dialog_fn(data){
			if(data){
				this.item_data = data;
				this.type = 'edit'
			}
			this.show_dialog = true;
		},
        handleClose(done) {
		//done 用于关闭 Drawer
        if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then(_ => {
                    this.loading = true;
                    this.$refs.ruleForm.validate(valid => {
                     if (valid) {  
                       for(let i=0;i<this.group.length;i++){
                           if(this.group[i].id==this.form.project_class_id){
                                 this.form.project_class_name=this.group[i].project_class_name;
                                 }
                       }
                       this.$http
                      .post(
                       "/admin/platform_coupon/index.php?act=platform_coupon&op=add_coupon",
                       this.form
                     )
            .then(res => {
              if (res.code == 1) {

                this.$parent.getListData();
                
              } else {
                  alert(res.msg);
                  
              }
            });
           
             
          
          }
           });

                    this.timer = setTimeout(() => {

                        done && done();
                         
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch(_ => { });
            },
        cancelForm() {
          // done();
            this.loading = false;
			      this.show_dialog = false;
            clearTimeout(this.timer);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
    .el-drawer.rtl{
 
    overflow: scroll
    }
    .shop-edit {
  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea {
    width: 220px;
  }
}
</style>
<style lang="scss" scoped>
.el-drawer{
    overflow: scroll;
}
.demo-ruleForm{
  padding-left: 2%;
}
.shop-edit {
  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea {
    width: 220px;
  }
}
</style>